<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-100 px-4">
    <div class="bg-white shadow-lg rounded-2xl w-full max-w-md p-6">
      <LogoImg />
      <form @submit.prevent="handleLogin">
        <div class="mb-4">
          <label for="username" class="block mb-1 text-sm font-medium text-gray-700">Username</label>
          <input
              id="username"
              v-model="form.username"
              type="text"
              required
              class="w-full px-4 py-2 border rounded-xl focus:ring focus:outline-none"
          />
        </div>

        <div class="mb-4">
          <label for="password" class="block mb-1 text-sm font-medium text-gray-700">Password</label>
          <input
              id="password"
              v-model="form.password"
              type="password"
              required
              class="w-full px-4 py-2 border rounded-xl focus:ring focus:outline-none"
          />
        </div>

        <button
            type="submit"
            :disabled="loading"
            class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl disabled:opacity-50"
        >
          {{ loading ? 'Login...' : 'Login' }}
        </button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { login } from '@/api/index.js';
import LogoImg from '@/components/LogoImg.vue';
import router from '@/router/index.js';
import { ref } from 'vue';

const form = ref({
  username: '',
  password: '',
});

const errorMessage = ref('');
const loading = ref(false);

async function handleLogin() {
  loading.value = true;
  try {
    console.log(form.value);
    const data = await login({ ...form.value, email: form.value.username });
    localStorage.setItem('token', data.token);
    localStorage.setItem('userInfo', JSON.stringify(data));
    router.push('/upload');
    console.log(data);
  } catch (e) {
    console.log(e);
  }
  loading.value = false;
}
</script>

<style scoped>
/* 可根据实际项目添加更多样式 */
</style>
